<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<!--画圆弧

    ctx.arc(圆心的x，圆心的y ，半径，开始的弧度，结束的弧度)-->
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");

    ctx.moveTo(0,cas.height/2);
    ctx.lineTo(cas.width,cas.height/2);
    ctx.stroke();
    ctx.moveTo(cas.width/2,0);
    ctx.lineTo(cas.width/2,cas.height);
    ctx.stroke();
    ctx.beginPath()

//    ctx.moveTo(300,300)
//    ctx.arc(300,300,100,degToArc(225),degToArc(315))
//    ctx.closePath()
//    ctx.stroke()
    ctx.arc(300,300,100,degToArc(0),degToArc(360))
    ctx.stroke()


    function degToArc(num){
        return Math.PI/180*num;
    }
</script>

</body>
</html>